<template>
  <div class="search">
    <el-form ref="formRef" :model="searchForm" label-width="120px" size="large">
      <el-row :gutter="20">
        <template v-for="item in searchConfig" :key="item.prop">
          <el-col :span="item.span">
            <el-form-item :label="item.label" :prop="item.prop">
              <template v-if="item.type === 'input'">
                <el-input v-model="searchForm[item.prop]" :placeholder="item.placeholder" />
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select v-model="searchForm[item.prop]" :placeholder="item.placeholder">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'date-picker'">
                <el-date-picker
                  v-model="searchForm[item.prop]"
                  :type="item.dataType"
                  :range-separator="item.linkMark"
                  :start-placeholder="item.linkMark"
                  :end-placeholder="item.endText"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <div class="btns">
      <el-button icon="Refresh" size="large" @click="resetFn">重置</el-button>
      <el-button icon="Search" size="large" type="primary" @click="searchFn">搜索</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'
const emit = defineEmits(['handleResetClick', 'handleSearchClick'])

interface Iprops {
  searchConfig: any[]
}
const props = defineProps<Iprops>()

// 表单根元素
const formRef = ref<InstanceType<typeof ElForm>>()

// 搜索表单
const searchForm = reactive(
  props.searchConfig.reduce((obj, item) => {
    obj[item.prop] = item.initialVal ?? '' // 初始值
    return obj
  }, {}),
)

// 重置
function resetFn() {
  formRef.value?.resetFields()
  emit('handleResetClick')
}

// 搜索
function searchFn() {
  emit('handleSearchClick', searchForm)
}
</script>

<style scoped lang="less">
.search {
  padding: 20px;
  background-color: #fff;
  .el-form-item {
    padding: 20px 30px;
    margin-bottom: 0;
  }

  .btns {
    text-align: right;
    padding-right: 30px;
  }
}
</style>
